<template>
  <div>
    <div>
      <div class="header flex">
      <el-input disabled placeholder="所属部门" style="width:200px"></el-input>
      <el-input v-model="month"  placeholder="工资月份" style="width:200px"></el-input>
        <el-button @click="search({ name, sex, ID, num, type })"
          >查询</el-button
        >
        <!-- 弹框  新增-->
        <el-popover placement="top" width="580" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm" >
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="name">
                <el-select v-model="ruleForm.value" placeholder="请选择">
    <el-option
      v-for="item in ruleForm.deptName"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>              </el-form-item>

              <el-form-item label="工资月份" prop="name">
                <el-input  placeholder="月份" v-model="ruleForm.month"></el-input>
              </el-form-item>
              <el-form-item label="基本工资" prop="name">
                <el-input  placeholder="基本工资" v-model="ruleForm.basePay"></el-input>
              </el-form-item>
              <!-- 学历 -->
              <el-form-item label="全勤工资" prop="name">
                <el-input placeholder="全勤工资" v-model="ruleForm.fullPay"></el-input>
              </el-form-item>
              <el-form-item label="迟到扣款" prop="name">
                <el-input placeholder="迟到扣款" v-model="ruleForm.late"></el-input>
              </el-form-item>
              <el-form-item label="请假扣款" prop="name">
                <el-input placeholder="请假扣款" v-model="ruleForm.leave"></el-input>
              </el-form-item>
              <el-form-item label="绩效奖金" prop="name">
                <el-input placeholder="绩效" v-model="ruleForm.kpiPay"></el-input>
              </el-form-item>
              <el-form-item label="个税扣款" prop="name">
                <el-input placeholder="个税扣款" v-model="ruleForm.lncomeTax"></el-input>
              </el-form-item>
              <el-form-item label="五险一金" prop="name">
                <el-input placeholder="请输入" v-model="ruleForm.insurance"></el-input>
              </el-form-item>

              <el-form-item label="创建时间" prop="age">
     <el-date-picker v-model="ruleForm.date"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd" >
    </el-date-picker>
   </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)" >立即创建</el-button >
              </el-form-item>
            </el-form>
          </p>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference">新增</el-button>
        </el-popover>
        <el-button type="danger" @click="clear()">删除</el-button>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <!-- 单选全选 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="员工姓名" width="120">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="name" label="所属部门" width="120">
          <template slot-scope="scope">{{ scope.row.deptName }}</template>
        </el-table-column>
        <el-table-column prop="address" label="工资月份" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.month }}</template>
        </el-table-column>
        <el-table-column label="基本工资" width="120">
          <template slot-scope="scope">{{ scope.row.basePay }}</template>
        </el-table-column>
        <el-table-column prop="name" label="全勤工资" width="120">
          <template slot-scope="scope">{{ scope.row.fullPay }}</template>
        </el-table-column>
        <el-table-column prop="address" label="迟到扣款" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.late }}</template>
        </el-table-column>
        <el-table-column label="请假扣款" width="120">
          <template slot-scope="scope">{{ scope.row.leave }}</template>
        </el-table-column>
        <el-table-column prop="name" label="绩效奖金" width="120">
          <template slot-scope="scope">{{ scope.row.kpiPay }}</template>
        </el-table-column>
        <el-table-column prop="address" label="个税扣款" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.lncomeTax }}</template>
        </el-table-column>
        <el-table-column prop="address" label="五险一金" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.lnsurance }}</template>
        </el-table-column>
        <el-table-column prop="address" label="创建时间" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="60"
          @click="handleEdit( scope.row)">编辑</el-button>
      </template>
      </el-table-column>
      </el-table>
      <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name : '张三',
        value:'',
        deptName : [
          {
          value: '生产',
          label: '生产'
        }, {
          value: '财务',
          label: '财务'
        }, {
          value: '人事',
          label: '人事'
        },
          ], //部门
          month : '2', // 月份
          basePay : '3000', //基本
          fullPay : '5000', //全勤
          late : '300',  //迟到
          leave : '100',  //请假
          kpiPay : '500',  //绩效
          lncomeTax : '100',  //个税
          lnsurance : '400', //保险
          date : '2020-12-09',
      },
      visible: false,
      month:''  ,
      dataList:[],
      total: 0, // 列表总行数
        currentPage: 1,
        pageSize: 13,
      tableData: [],
      multipleSelection: [],
    };
  },
  created(){
    this.jia()
  },
  components: {
    Pagin: () => import('c/Pagin')
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    submitForm(form) {
      console.log(form);
      //请求成功后
      var newObj = {
        name : form.name,
        deptName : form.value, //部门
          month : form.month, // 月份
          basePay : form.basePay, //基本
          fullPay : form.fullPay, //全勤
          late : form.late,  //迟到
          leave : form.leave, //请假
          kpiPay : form.kpiPay, //绩效
          lncomeTax : form.lncomeTax, //个税
          lnsurance : form.lnsurance, //保险
          date : form.date
      }
      this.dataList.unshift(newObj)
      console.log(this.dataList.length);
      this.fetchData(this.currentPage)
             this.total = this.dataList.length
             this.$message.success('添加成功')
      //关闭
      this.visible = false
    },
    //删除
    clear(){
      var idArr = []
      this.multipleSelection.forEach(item=>{
        // console.log(item.id,'sda')
         idArr.push(item.id)
      })
      console.log(idArr);
      //请求成功后

      //过滤掉重复的，拿到新的数据渲染
         let newarr = this.dataList.filter(item =>  ! this.multipleSelection.includes(item))
          this.dataList = newarr
          this.fetchData(this.currentPage)
          this.total = this.dataList.length
          this.$message.success('删除成功')
    },
    //修改
    handleEdit(row){
console.log(row)
    },
    //模拟假数据
    jia(){
      var obj = {}
      for(var i = 0;i < 100; i++){
        obj={
          name : '张三' + i + 1,
          deptName : '生产', //部门
          month : '2', // 月份
          basePay : '3000', //基本
          fullPay : '5000', //全勤
          late : '300',  //迟到
          leave : '100',  //请假
          kpiPay : '500',  //绩效
          lncomeTax : '100',  //个税
          lnsurance : '400', //保险
          date : '2020-12-09',
        }
        this.dataList.push(obj)

      }
      this.total = this.dataList.length
      this.fetchData(this.currentPage)
    },
    fetchData (count) {
      var list = this.dataList
      var from = (count - 1) * this.pageSize
      const to = count * this.pageSize
      this.tableData = []
      for (var from = 0; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 55%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
